<script setup lang="ts">
import * as echarts from 'echarts';
import { inject, onMounted, ref } from 'vue';
import type { CacheDataModel, UowDataModel, LogDashboardHttpService } from '../service/log-dashboard-http.service';

var httpService = inject<LogDashboardHttpService>('LogDashboardHttpService');

const cacheLogModels = ref<Array<CacheDataModel>>();
const uowLogModels = ref<Array<UowDataModel>>();
const lineChartData: any[] = [];
const lineChartAreaData: any[] = [];
function onUploadSuccess() {
  httpService?.apiDashboardGetCacheLogs().then(result => {
    cacheLogModels.value = result;
  });

  httpService?.apiDashboardGetCacheLineChartData().then(result => {
    let list = result['PermitTree'];

    for (let key in list) {
      let count = list[key];
      lineChartData.push([key, count]);
    }

    testChart();
  });

  httpService?.apiDashboardGetUowLogs().then(result => {
    uowLogModels.value = result;
  });
}

function HitRateClass(rate: number) {
  if (rate >= 0.9) {
    return { 'green-font': true };
  } else if (rate >= 0.6) {
    return { 'yellow-font': true }
  } else {
    return { 'red-font': true }
  }
}

onMounted(() => {
  //testChart();
});

function testChart() {
  var myChart = echarts.init(document.getElementById('chart')!);
  let option = {
  xAxis: {
    type: 'time',
    boundaryGap: false
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: lineChartData,
      type: 'line',
      areaStyle: {}
    }
  ]
};

myChart.setOption(option);
}
</script>

<template>
<el-upload ref="upload" class="upload-demo" :limit="1"
  action="https://localhost:7003/api/Dashboard/ParseData"
  :auto-upload="true" :on-success="onUploadSuccess">
  <template #trigger>
    <el-button type="primary">select file</el-button>
  </template>
</el-upload>

<el-table class="common-shadow0 common-table" style="margin-top: 12px;" 
  :data="cacheLogModels">
  <el-table-column prop="key" label="缓存键值" />
  <el-table-column prop="hitCount" label="缓存命中次数" />
  <el-table-column prop="missCount" label="缓存未命中次数" />
  <el-table-column prop="hitRate" label="缓存命中率" >
    <template #default="scope"><span :class="HitRateClass(scope.row.hitRate)">{{ (scope.row.hitRate * 100).toFixed(2) }}%</span></template>
  </el-table-column>
  <el-table-column prop="averageElapsed" label="读取数据平均耗时(毫秒)" />
</el-table>

<div id="chart" style="width: 100%;height: 200px;"></div>

<el-table class="common-shadow0 common-table" style="margin-top: 12px;" 
  :data="uowLogModels">
  <el-table-column prop="name" label="工作单元" />
  <el-table-column prop="count" label="执行次数" />
  <el-table-column prop="maxElapsed" label="最大耗时(毫秒)" />
  <el-table-column prop="minElapsed" label="最小耗时(毫秒)" />
  <el-table-column prop="averageElapsed" label="平均耗时(毫秒)" />
</el-table>
</template>

<style lang="scss">

</style>